import React, { useState, useRef, useEffect } from 'react';
import { Button, message } from 'antd';
import { SafetyOutlined, ReloadOutlined, CheckOutlined } from '@ant-design/icons';
import './SimpleCaptcha.css';

interface SimpleCaptchaProps {
  onSuccess: () => void;
  onFail: () => void;
}

const SimpleCaptcha: React.FC<SimpleCaptchaProps> = ({ onSuccess, onFail }) => {
  const [isVerified, setIsVerified] = useState(false);
  const [sliderPosition, setSliderPosition] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const [targetPosition, setTargetPosition] = useState(0);
  const [sliderWidth, setSliderWidth] = useState(0);
  const [showVerification, setShowVerification] = useState(false);
  
  const sliderRef = useRef<HTMLDivElement>(null);

  // 初始化滑块验证
  useEffect(() => {
    if (showVerification && sliderRef.current) {
      const width = sliderRef.current.offsetWidth;
      setSliderWidth(width);
      const target = Math.random() * (width - 60) + 30;
      setTargetPosition(target);
      setSliderPosition(0);
    }
  }, [showVerification]);

  // 滑块拖动处理
  const handleSliderMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true);
    document.addEventListener('mousemove', handleSliderMouseMove);
    document.addEventListener('mouseup', handleSliderMouseUp);
  };

  const handleSliderMouseMove = (e: MouseEvent) => {
    if (!isDragging || !sliderRef.current) return;
    
    const rect = sliderRef.current.getBoundingClientRect();
    const newPosition = Math.max(0, Math.min(e.clientX - rect.left, sliderWidth - 60));
    setSliderPosition(newPosition);
  };

  const handleSliderMouseUp = () => {
    setIsDragging(false);
    document.removeEventListener('mousemove', handleSliderMouseMove);
    document.removeEventListener('mouseup', handleSliderMouseUp);
    
    // 验证滑块位置
    const tolerance = 15;
    if (Math.abs(sliderPosition - targetPosition) <= tolerance) {
      handleVerificationSuccess();
    } else {
      handleVerificationFail();
    }
  };

  // 验证成功处理
  const handleVerificationSuccess = () => {
    setIsVerified(true);
    message.success('验证成功！');
    onSuccess();
  };

  // 验证失败处理
  const handleVerificationFail = () => {
    message.error('验证失败，请重试');
    onFail();
    // 重置滑块位置
    setSliderPosition(0);
  };

  // 重置验证
  const resetVerification = () => {
    setIsVerified(false);
    setSliderPosition(0);
    if (sliderRef.current) {
      const width = sliderRef.current.offsetWidth;
      const target = Math.random() * (width - 60) + 30;
      setTargetPosition(target);
    }
  };

  return (
    <div className="simple-captcha">
      {!showVerification ? (
        <Button 
          type="primary" 
          icon={<SafetyOutlined />}
          onClick={() => setShowVerification(true)}
          className="captcha-trigger-btn"
        >
          人机验证
        </Button>
      ) : (
        <div className="captcha-verification-area">
          {!isVerified ? (
            <>
              <div className="slider-container" ref={sliderRef}>
                <div className="slider-track">
                  <div 
                    className="slider-target"
                    style={{ left: `${targetPosition}px` }}
                  ></div>
                </div>
                <div 
                  className="slider-handle"
                  style={{ left: `${sliderPosition}px` }}
                  onMouseDown={handleSliderMouseDown}
                >
                  <span>→</span>
                </div>
              </div>
              <p className="verification-tip">请将滑块拖到指定位置</p>
              <Button 
                icon={<ReloadOutlined />}
                onClick={resetVerification}
                size="small"
                className="reset-btn"
              >
                重新验证
              </Button>
            </>
          ) : (
            <div className="verification-success">
              <CheckOutlined className="success-icon" />
              <span>验证通过</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default SimpleCaptcha; 